<!DOCTYPE html>
<html>
<head>
    <title>WebSocket测试</title>
</head>
<body>
    <h1>WebSocket连接测试</h1>
    <div id="status">未连接</div>
    <button onclick="testDirectConnection()">测试直接连接8080</button>
    <button onclick="testNginxConnection()">测试通过nginx连接</button>
    <button onclick="closeConnection()">关闭连接</button>
    <div id="log" style="border: 1px solid #ccc; height: 400px; overflow-y: auto; margin-top: 10px; padding: 10px;"></div>

    <script>
        let ws = null;
        const log = document.getElementById('log');
        const status = document.getElementById('status');

        function addLog(message, type = 'info') {
            const time = new Date().toLocaleTimeString();
            const color = type === 'error' ? 'red' : type === 'success' ? 'green' : 'black';
            log.innerHTML += `<div style="color: ${color}">[${time}] ${message}</div>`;
            log.scrollTop = log.scrollHeight;
        }

        function updateStatus(text, color = 'black') {
            status.textContent = text;
            status.style.color = color;
        }

        function testDirectConnection() {
            closeConnection();
            const url = 'ws://localhost:8080/ws/test-' + Date.now();
            addLog('尝试直接连接: ' + url);
            connect(url);
        }

        function testNginxConnection() {
            closeConnection();
            const url = 'ws://localhost/ws/test-' + Date.now();
            addLog('尝试通过nginx连接: ' + url);
            connect(url);
        }

        function connect(url) {
            try {
                ws = new WebSocket(url);
                
                ws.onopen = function() {
                    addLog('连接成功！', 'success');
                    updateStatus('已连接', 'green');
                    
                    // 发送测试消息
                    const testMsg = JSON.stringify({
                        type: 'test',
                        message: 'Hello WebSocket',
                        timestamp: Date.now()
                    });
                    ws.send(testMsg);
                    addLog('发送测试消息: ' + testMsg);
                };
                
                ws.onmessage = function(event) {
                    addLog('收到消息: ' + event.data, 'success');
                };
                
                ws.onerror = function(error) {
                    addLog('连接错误: ' + JSON.stringify(error), 'error');
                    updateStatus('连接错误', 'red');
                };
                
                ws.onclose = function(event) {
                    addLog(`连接关闭 - 代码: ${event.code}, 原因: ${event.reason}`, 'error');
                    updateStatus('连接已关闭', 'orange');
                };
                
            } catch (error) {
                addLog('创建WebSocket失败: ' + error.message, 'error');
            }
        }

        function closeConnection() {
            if (ws && ws.readyState === WebSocket.OPEN) {
                ws.close();
                addLog('手动关闭连接');
            }
        }
    </script>
</body>
</html> 